<template>
	<view>
		<uni-section title="biaoti" type="line">
			<view class="">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :model="baseFormData" labelWidth="80px">
					<uni-forms-item 
						v-for="(comp, i) in templates" 
						:key="i" 
						label="姓名" 
						required 
						name="name"
					>
						<view class="" v-if="comp.name === 'TextInput'">
							<uni-easyinput v-model="currentVal" :placeholder="placeholder" />
						</view>
						<view class="" v-else-if="comp.name === 'NumberInput'">
							<uni-easyinput v-model="currentVal" :placeholder="placeholder" type="digit" />
						</view>
						<view class="" v-else-if="comp.name === 'AmountInput'">
							<uni-number-box v-model="currentVal" :step="0.01" />
						</view>
						<view class="" v-else-if="comp.name === 'TextareaInput'">
							<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
						</view>
						<view class="" v-else-if="comp.name === 'CompApplyDate'">
							<uni-datetime-picker type="datetime" disabled v-model="baseFormData.datetimesingle"/>
						</view>
						<view class="" v-else-if="comp.name === 'CompCompany'">
							<uni-data-select v-model="baseFormData.skills" disabled :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompDept'">
							<uni-data-select v-model="baseFormData.skills" disabled :localdata="[]" />
						</view>
						<!-- 词典 -->
						<view class="" v-else-if="comp.name === 'CompDict'">
							<uni-data-select v-model="baseFormData.skills" :placeholder="placeholder"  :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompItemName'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompContract'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompLicence'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompMaterialType'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompMeetingRoom'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompOfficialStamp'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompVehicle'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<!-- 岗位 -->
						<view class="" v-else-if="comp.name === 'CompPost'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompProposer'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'CompSwitch'">
							<switch name="switch" />
							<!-- <uni-data-select v-model="baseFormData.skills" :localdata="[]" /> -->
						</view>
						<view class="" v-else-if="comp.name === 'DateTime'">
							<uni-datetime-picker type="datetime" v-model="baseFormData.datetimesingle"/>
						</view>
						<view class="" v-else-if="comp.name === 'DateTimeRange'">
							<uni-datetime-picker type="datetime" v-model="baseFormData.datetimesingle"/>
						</view>
						<view class="" v-else-if="comp.name === 'DeptPicker'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'UserPicker'">
							<uni-data-select v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'Description'">
							<uni-section class="mb-10" title="" sub-title="提示文字"></uni-section>
						</view>
						<!-- #ifdef H5 || MP-WEIXIN -->
						<view class="" v-else-if="comp.name === 'FileUpload'">
							<uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker>
						</view>
						<!-- #endif -->
						<view class="" v-else-if="comp.name === 'ImageUpload'">
							<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
						</view>
						<view class="" v-else-if="comp.name === 'MoneyInput'">
							<uni-easyinput v-model="currentVal" :placeholder="placeholder" type="number" />
							<view class="">大写：{{chinese}}</view>
						</view>
						<view class="" v-else-if="comp.name === 'MultipleSelect'">
							<!-- 区分选项展开 expanding true 为checkbox -->
							<uni-data-checkbox v-if="expanding" multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
						</view>
						<view class="" v-else-if="comp.name === 'SelectInput'">
							<!-- 区分选项展开 expanding true 为checkbox -->
							<uni-data-checkbox v-if="expanding" v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
							<uni-data-select v-else v-model="baseFormData.skills" :localdata="[]" />
						</view>
						<view class="" v-else-if="comp.name === 'SpanLayout'">
							<!-- 所有组件都可能出现，不过需要展开像普通组件一样使用 -->
						</view>
						<view class="" v-else-if="comp.name === 'TableList'">
							<!--  TODO table 所有组件都可能出现 -->
						</view>
						
						
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
import { response } from './formRes.js'
	export default {
		data() {
			return {
				templates: JSON.parse(response.result.formItems),
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
			};
		},
		computed:{
			chinese(){
				return this.convertCurrency(this.value)
			},
		},
		methods: {
			convertCurrency(money) {
				//汉字的数字
				const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
				//基本单位
				const cnIntRadice = ['', '拾', '佰', '仟'];
				//对应整数部分扩展单位
				const cnIntUnits = ['', '万', '亿', '兆'];
				//对应小数部分单位
				const cnDecUnits = ['角', '分', '毫', '厘'];
				//整数金额时后面跟的字符
				const cnInteger = '整';
				//整型完以后的单位
				const cnIntLast = '元';
				//最大处理的数字
				let maxNum = 999999999999999.9999;
				//金额整数部分
				let integerNum;
				//金额小数部分
				let decimalNum;
				//输出的中文金额字符串
				let chineseStr = '';
				//分离金额后用的数组，预定义
				let parts;
				if (money === '') {
					return '';
				}
				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return '';
				}
				if (money === 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
					return chineseStr;
				}
				//转换为字符串
				money = money.toString();
				if (money.indexOf('.') === -1) {
					integerNum = money;
					decimalNum = '';
				} else {
					parts = money.split('.');
					integerNum = parts[0];
					decimalNum = parts[1].substr(0, 4);
				}
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (let i = 0; i < IntLen; i++) {
						let n = integerNum.substr(i, 1);
						let p = IntLen - i - 1;
						let q = p / 4;
						let m = p % 4;
						if (n == '0') {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum !== '') {
					let decLen = decimalNum.length;
					for (let i = 0; i < decLen; i++) {
						let n = decimalNum.substr(i, 1);
						if (n !== '0') {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr === '') {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum === '') {
					chineseStr += cnInteger;
				}
				return chineseStr;
			}
		}
	}
</script>

<style lang="scss">

</style>
